<template>
	<view class="fl1">
		<scroll-view scroll-x style="height: 40px">
			<view class="fltab">
				<view class="fltab-item fltab-item1" :class="{active: currentIndex === index}" v-for="(item,index) in list" :key="index" @click="changeTab(item,index)">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			// 当前选择的索引
			currentIndex: {
				type: Number,
				default: 0,
				required: true
			},
			// 导航数据
			list: {
				type: Array,
				default() {
					return [
						// {
						// 	id: 1,
						// 	name: '箱包'
						// }
					]
				},
				required: true,
			}
		},
		methods:{
			changeTab(item,index) {
				this.$emit('on-change',{item,index})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fl1 {
		border-bottom: 1px solid #eee;
		box-sizing: border-box;
	}
	
	.fltab {
		height: 100%;
		display: flex;
	}
	
	.fltab-item {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		height: 100%;
		font-size: 26rpx;
		padding: 0 20rpx;
		position: relative;
		
		&.active {
			color: #00B4FF;
			
			&::after {
				display: block;
			}
		}
	}
	
	.fltab-item1 {
		&::after {
			content: "";
			display: none;
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -0.5em;
			width: 1em;
			height: 6rpx;
			background-color: #00B4FF;
		}
		&.active {
			&::after {
				display: block;
			}
		}
	}
</style>
